'use client';
import Mask from '@/app/components/Mask';
import style from './index.module.scss';
import { useSetState } from 'ahooks';
import { useEffect } from 'react';
import { getVipTypes } from '@/service';
import classNames from 'classnames';
import Alipay from './alipay';
export default function Index({ onClose }) {
  const [state, setState] = useSetState<{
    list: any[];
    current: Record<string, string>;
  }>({
    list: [],
    current: {},
  });
  useEffect(() => {
    getVip();
  }, []);
  const getVip = () => {
    getVipTypes().then((res) => {
      setState({
        list: res.data,
        current: res.data[0],
      });
    });
  };
  return (
    <Mask>
      <div className={style.vipWrapper}>
        <h3 className={style.title}> VIP 会员权益</h3>
        <div
          style={{
            position: 'absolute',
            right: '20px',
            top: '20px',
            cursor: 'pointer',
          }}
          onClick={() => {
            onClose?.();
          }}
        >
          <svg
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            width="24"
            height="24"
          >
            <path
              d="M544.448 499.2l284.576-284.576a32 32 0 0 0-45.248-45.248L499.2 453.952 214.624 169.376a32 32 0 0 0-45.248 45.248l284.576 284.576-284.576 284.576a32 32 0 0 0 45.248 45.248l284.576-284.576 284.576 284.576a31.904 31.904 0 0 0 45.248 0 32 32 0 0 0 0-45.248L544.448 499.2z"
              fill="#3E3A39"
            ></path>
          </svg>
        </div>
        <div className={style.vipContent}>
          {state.list.map((item) => {
            return (
              <div
                key={item.id}
                className={classNames(style.vipCard, {
                  [style.focus]: state.current?.id == item.id,
                })}
                onClick={() => {
                  setState({
                    current: item,
                  });
                }}
              >
                <div className={style.name}>{item.name}</div>
                <div className={style.pricewraper}>
                  ￥<span className={style.price}>{item.price}</span>
                </div>
                <div style={{ fontSize: '12px', textAlign: 'center' }}>
                  {item.description}
                </div>
              </div>
            );
          })}
          <div style={{ display: 'flex' }}>
            <div>
              <Alipay id={state.current?.id}></Alipay>
            </div>
            <div
              style={{
                display: 'flex',
                alignItems: 'flex-end',
                padding: '20px',
              }}
            >
              <div style={{ color: 'gray' }}>
                <div style={{ marginBottom: '10px', color: '#333' }}>
                  付款金额:
                  <span
                    style={{
                      marginBottom: '10px',
                      color: '#f60',
                      fontSize: '30px',
                    }}
                  >
                    ￥{state.current?.price}
                  </span>
                </div>
                使用 支付宝 扫码付款
              </div>
            </div>
          </div>
        </div>
      </div>
    </Mask>
  );
}
